<template>
  <div class="comparison-container">
    <div class="comparison-wrapper" ref="container">
      <img :src="originalImage" class="comparison-image original" />
      <img
        :src="colorizedImage"
        class="comparison-image colorized"
        :style="{ clipPath: `inset(0 ${100 - sliderPosition}% 0 0)` }"
      />
      <div
        class="slider"
        :style="{ left: `${sliderPosition}%` }"
        @mousedown="startDragging"
      >
        <div class="slider-line"></div>
        <div class="slider-button">
          <el-icon><d-arrow-left /></el-icon>
          <el-icon><d-arrow-right /></el-icon>
        </div>
      </div>
    </div>
    <div class="comparison-controls">
      <el-button-group>
        <el-button @click="downloadImage('original')">下载原图</el-button>
        <el-button type="primary" @click="downloadImage('colorized')">下载上色结果</el-button>
      </el-button-group>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'

const props = defineProps<{
  originalImage: string
  colorizedImage: string
}>()

const container = ref<HTMLElement | null>(null)
const sliderPosition = ref(50)
const isDragging = ref(false)

const startDragging = (e: MouseEvent) => {
  isDragging.value = true
  updateSliderPosition(e)
}

const updateSliderPosition = (e: MouseEvent) => {
  if (!isDragging.value || !container.value) return
  
  const rect = container.value.getBoundingClientRect()
  const x = e.clientX - rect.left
  const position = (x / rect.width) * 100
  
  sliderPosition.value = Math.max(0, Math.min(100, position))
}

const stopDragging = () => {
  isDragging.value = false
}

const downloadImage = (type: 'original' | 'colorized') => {
  const url = type === 'original' ? props.originalImage : props.colorizedImage
  const link = document.createElement('a')
  link.href = url
  link.download = `image-${type}.jpg`
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

onMounted(() => {
  window.addEventListener('mousemove', updateSliderPosition)
  window.addEventListener('mouseup', stopDragging)
})

onUnmounted(() => {
  window.removeEventListener('mousemove', updateSliderPosition)
  window.removeEventListener('mouseup', stopDragging)
})
</script>

<style scoped>
.comparison-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.comparison-wrapper {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.comparison-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  margin-left: -20px;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-line {
  position: absolute;
  width: 2px;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.slider-button {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.comparison-controls {
  margin-top: 20px;
  text-align: center;
}
</style> 